import React, {Component} from 'react'
import { is } from 'immutable'
import { Layout } from 'antd';
const { Footer, Content} = Layout
import { Link } from 'react-router-dom'
import Url from '../constants/url';

const content_style = {
    marginLeft: '-50%'
}

const box_style = {
    position: 'relative',
    float: 'left',
    left: '50%'
}

const title_style = {
    textAlign: 'center',
    marginBottom: 10,
    fontSize: 25,
    fontWeight: 'normal',
    fontFamily:'"Times New Roman",Georgia,"Sans-serif"'
}

const page_style = {
    background: 'white',
    padding: 80,
    paddingTop: 30
}

const p_style = {
    marginBottom: 30,
    fontSize: 18,

}
export class CusFooter extends Component {
    componentDidMount() {

    }

    shouldComponentUpdate(nextProps, nextState){
        return !(this.props === nextProps || is(this.props, nextProps)) ||
            !(this.state === nextState || is(this.state, nextState));
    }

    render() {
        return (
            <div style={box_style}>
                <div style={content_style}>
                    <Link  to={Url.about}><span>About | </span></Link>
                    <Link  to={Url.privacy}><span>Privacy & Terms</span></Link>
                </div>
            </div>

        )
    }
}

export class About extends Component {
    render() {
        return (
            <div style={page_style}>
                <h2 style={title_style}>About</h2>
                <p style={p_style}>
                    This site aims at simplify the use of google advanced search，so you can get rid of memorizing too much operators and commands.
                    in the select box，you can input the search condition, then click search icon, this site will make the query statement for you.
                    <br/>If there is any question or suggestion, please feel free to contact us by email at lbajames@sina.com
                </p>
                <div style={box_style}>
                    <div style={content_style}>
                        <Link  to={Url.root}><span>Home</span></Link>
                    </div>
                </div>
            </div>
        )

    }
}


export class Privacy extends Component {
    render() {
        return (
            <div style={page_style}>
                <h2 style={title_style}>Privacy</h2>
                <p style={{...p_style, textAlign: 'center',}}>
                    This site will collect or store no data of users.
                </p>
                <div style={box_style}>
                    <div style={content_style}>
                        <Link  to={Url.root}><span>Home</span></Link>
                    </div>
                </div>
            </div>
        )
    }
}